<template>
  <div id="app">
    <el-menu
      v-if="!isLogin"
      router
      mode="horizontal"
      theme="dark"
      default-active="/user"
    >
      <el-menu-item
        index="/user"
      >
        用户管理
      </el-menu-item>
      <el-link
        :underline="false"
        class="logout"
        @click="logout"
      >
        退出登录
      </el-link>
    </el-menu>
    <router-view class="router-content"/>
  </div>
</template>
<script>
import http from './http'
export default {
  computed: {
    isLogin () {
      return this.$route.name === 'login'
    }
  },
  methods: {
    logout () {
      http.post('/logout')
        .then(() => {
          this.$router.push('/login')
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.router-content {
  padding: 16px;
}
.logout {
  position: absolute;
  top: 16px;
  right: 8px;
}
</style>
